import React, { useEffect, useState, } from 'react';
import { useLocation } from 'react-router-dom'
import { Table, Switch, Space, Pagination, ConfigProvider, Modal, Button, message, } from 'antd';
import { ExclamationCircleFilled } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import './css/GoodClassify.less'
import '../../css/public.less' // 导入公共样式
import zh_CN from 'antd/es/locale/zh_CN';
import CompileClassify from './child/CompileClassify'
import { secondarYmenu } from '../../../api/ycl'
import { deletesecondary } from '../../../api/ycl'
import { downBox } from '../../../api/ycl'
import { classifiedData } from '../../../api/ycl'
import {api} from '../../../api/ycl'
interface DataType {
    categoryId: number; //ID
    categoryName: string; //分类
    categoryImg: string,
    categoryParent: number, //级别
    categoryNumber: number, // 商品数量
    categoryStatus: string | boolean | number, //是否上架，1为上架，其余都是未上架
    categorySort: string, //排序
}
interface PropsType {
    categoryId: number,
    coss(): void
}
// 是否上架
const { confirm } = Modal;
function GoodSubordinate(props: PropsType) {
    const [isModalOpen1, setIsModalOpen1] = useState(false); //编辑
    const [editValue, setEditValue] = useState<DataType | null>(null)
    const location = useLocation()
    const [data, setData] = useState<DataType | any>()
    const [type, setType] = useState<undefined | string>()
    const [messageApi, contextHolder] = message.useMessage();
    const [box, setBox] = useState<any>()  //获取到下拉框里面的内容


    // 发起请求
    useEffect(() => {
        secondar()
        // addBox()
        dataApi()
    }, [])

    const columns: ColumnsType<DataType> = [
        {
            title: '分类',
            dataIndex: 'categoryName',
        },
        {
            title: '分类图标',
            dataIndex: 'categoryImg',
            align: 'center',
            render: (_, record) => {
                return (
                    <img width={50} height={50} src={api + record.categoryImg} alt="" />
                )
            }
        },
        {
            title: '级别',
            dataIndex: 'categoryParent',
            align: 'center',
            render: (_, record) => {
                return (
                    <p>{record.categoryParent === 0 ? '一级' : '二级'}</p>
                )
            }
        },
        {
            title: '商品数量',
            dataIndex: 'categoryNumber',
            align: 'center',
        },
        {
            title: '是否上架',
            dataIndex: 'categoryStatus',
            align: 'center',
            render: (value, record) => {
                // console.log(value);

                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <Switch
                        onChange={onChange}
                        checked={value == 1 ? true : false}
                        onClick={() => { shopId(record) }}
                    />
                )
            }
        },
        {
            title: '排序',
            dataIndex: 'categorySort',
            align: 'center',
        },
        {
            title: '操作',
            dataIndex: 'address',
            align: 'center',
            render: (_, record) => {
                return ( //这个是加一个选中或者没选中的值defaultChecked
                    <Space size="middle">
                        <button className='edit' onClick={() => compile(record)}>编辑</button>
                        <button className='del' onClick={() => showConfirm(record)}>删除</button>
                    </Space>
                )
            }
        },
    ];

    // 获取数据
    const secondar = async () => {
        let data = { id: location.state.item }
        try {
            let res = await secondarYmenu(data)
            console.log(res);
            if (res.code == '200') {
                setData(res.data)
                console.log('这不是一个空数组');
            }
        } catch (err) {
            console.log(err);
            setData([])
        }
    }

    const dataApi = async () => {
        try {
            let res = await classifiedData()
            if (res.code == '200') {
                let listBox = res.data.map((item: { categoryId: any; categoryName: any; }) => {
                    return { value: item.categoryId, label: item.categoryName }
                })
                setBox(listBox)
            }
        } catch (err) {
            console.log('err', err);
        }
    }


    const compile = (item: DataType) => {
        setIsModalOpen1(true)
        setType('two')
        setEditValue(item)
    }
    const closeModal1 = () => {
        setIsModalOpen1(false)
    }
    const onChange = (e: boolean | number): void => { //点击上架为ture或者false
        console.log(e);
    };
    const shopId = (Items: DataType): void => { //点击上架获取到这一行的数据
        console.log(Items);

    }

    const coss = () => {
        setIsModalOpen1(false)
    }




    // 删除
    const showConfirm = (item: DataType) => {

        confirm({
            title: '删除',
            icon: <ExclamationCircleFilled />,
            content: '确定删除这个二级分类？',
            async onOk() {

                let params = { id: item.categoryId }
                try {
                    let res = await deletesecondary(params)
                    if (res.code == '200') {
                        await secondar()
                        messageApi.open({
                            type: 'success',
                            content: '删除成功',
                        });
                    }
                } catch (err) {
                    console.log('err', err);
                }
            },
            onCancel() {
            },
        });
    };
    return (<div className='Banner'>
        <div className='page-top'>
            <div className='page-title'>
                <p>二级分类</p>
            </div>
        </div>

        {contextHolder}
        <div className='page-context'>
            <div>
                <ConfigProvider locale={zh_CN}>
                    <Table
                        columns={columns}
                        dataSource={data}
                        scroll={{ y: 444 }}                        // 滚动设置成这样
                        rowKey={item => item.categoryId}
                        pagination={{
                            position: ['bottomCenter'],
                            defaultPageSize: 5,                       // 如果页面只有一个表格，就默认展示10条
                            pageSizeOptions: [3, 5, 10, 15],
                            showQuickJumper: true,             // 快速跳转
                            showSizeChanger: true,             // 页码改变
                        }}
                        title={() => <div className='title'>
                            <p>数据列表</p>
                        </div>}
                    />
                </ConfigProvider>

            </div>

        </div>
        {/* 这是编辑弹框 */}
        <CompileClassify type={type} isModalOpen1={isModalOpen1} closeModal1={closeModal1} editValue={editValue} coss={coss} secondar={secondar} box={box} dataApi={function (): void {
            throw new Error('Function not implemented.');
        }}></CompileClassify>
    </div>
    )
}


export default GoodSubordinate